<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            list-style: none;
            float: left;
             margin-left: 20px;
            padding:0;
            }
         li{
             position: relative;
        }
         .c{
             display: none;
             position: absolute;
             left: 0; 
             top: 100%; 
             border: 1px solid #ccc;
             padding: 10px 0;
         }
         .c li { 
             display: block; 
             color: purple; 
             padding: 5px 20px;
             list-style: none;
             float: left;
             margin-left: 20px;
         } 
         li:hover>.c{
            display: block;
         }
     </style>
</head>
<body>
     <ul calss="b">
        <li>奶茶
             <ul class="c">
                 <li>芋圆奶茶</li>
                <li>红豆奶茶</li>
                 <li>芋泥奶茶</li>
             </ul>
         </li>
    </ul> 
     <ul class="b">
         <li>果茶 
             <ul class="c">
                 <li>芋圆葡萄</li>
                 <li>棒打鲜橙</li>
                 <li>冰鲜柠檬水</li>
            </ul> 
       </li>
     </ul> 
     <ul class="b">
         <li>咖啡
            <ul class="c">
                <li>美式咖啡</li>
                <li>拿铁咖啡</li>
                <li>摩卡咖啡</li>
            </ul>
        </li>
     </ul> 
</body>
</html>